<template>
	<view class="container">
		<!-- 背景图片 -->
		<view class="background"></view>
		<view v-if="resStatus === 4" class="qrcode-container">
			<!-- <text class="qrcode-text">当前设备无订单，请扫码预约下单</text> -->
			<!-- 显示二维码图片 -->
			<image class="qrcode-image" :src="qrcodeImageUrl" mode="aspectFit" />
		</view>

		<!-- 计分板（发光球） -->
		<view v-else class="score-board">
			<view class="score-label-container">
				<text class="score-label">当前得分</text> <!-- 当前得分独占一行 -->
			</view>
			<!-- 判断为其他状态（得分） -->
			<view class="score-container">
				<text class="score-text" :style="{ fontSize: dynamicFontSize }">
					{{ score }}
				</text>
			</view>
		</view>

		<!-- 暂停提示 -->
		<view v-if="isPaused" class="paused-overlay">
			<text class="paused-text">暂停中</text>
		</view>
		<view v-if="isNoBall" class="paused-overlay">
			<text class="paused-text">没球啦</text>
		</view>
	</view>
</template>


<script>
	import xyTabbar from '@/components/xy-tabbar';

	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				score: 0, // 默认分数
				store_id: '',
				isPaused: false, // 暂停状态标志
				isNoBall: false, // 暂停状态标志
				refreshTimer: null, // 定时器变量
				resStatus: null, // 状态标志
				qrcodeImageUrl: 'https://wq.hoeagri.com/static/gh_9ad6d57693e8_860.jpg', // 二维码图片URL
			};
		},
		computed: {
			// 动态计算字体大小
			dynamicFontSize() {
				const baseSize = 30; // 基础字体大小（单位vw，基于视口宽度）
				const scoreLength = String(this.score).length; // 计算得分的长度

				// 根据得分位数调整字体大小
				if (scoreLength <= 2) {
					return `${baseSize}vw`; // 1-2位数，使用默认大小
				} else if (scoreLength <= 4) {
					return `${baseSize * 0.8}vw`; // 3-4位数，缩小 20%
				} else {
					return `${baseSize * 0.6}vw`; // 5位以上，缩小 40%
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.store_id = options.id;
				this.loadData();

				// 开启定时器，每5秒刷新数据
				this.refreshTimer = setInterval(this.loadData, 1000);
			}
		},
		beforeDestroy() {
			// 组件销毁时清除定时器，防止内存泄漏
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
			}
		},
		methods: {
			loadData() {
				this.$api.post({
					url: '/Venue/getRoomScore',
					data: {
						room_id: this.store_id,
					},
					success: res => {
						console.log('刷新得分:', res.score, '状态:', res.status);

						// 如果状态是 1，显示暂停提示
						if (res.status === 2) {
							this.isPaused = true;
							this.isNoBall = false;
							this.resStatus = 0;
							this.score = res.score;
						} else if (res.status === 3) {
							this.isNoBall = true; // 如果状态是 0，更新分数并去掉暂停提示
							this.isPaused = false;
							this.resStatus = 0;
							this.score = res.score;
						} else if (res.status === 0) {
							this.isPaused = false; // 如果状态是 0，更新分数并去掉暂停提示
							this.isNoBall = false; // 如果状态是 0，更新分数并去掉暂停提示
							this.resStatus = 0;
							this.score = res.score;
						} else if (res.status === 4) {
							this.isPaused = false; // 如果状态是 0，更新分数并去掉暂停提示
							this.isNoBall = false; // 如果状态是 0，更新分数并去掉暂停提示
							this.resStatus = 4;
						}

					},
				});
			},
		},
	};
</script>

<style scoped>
	/* 整个页面 */
	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	/* 背景 */
	.background {
		position: absolute;
		width: 100vw;
		height: 100vh;
		background-image: url('./assets/room/roomBack.png');
		/* 替换为你的背景图路径 */
		background-size: cover;
		background-position: center;
		filter: brightness(0.9);
	}

	/* 计分板 - 发光球 */
	.score-board {
		width: 100vw;
		/* 设定为屏幕宽度的一半 */
		height: 100vw;
		/* 设定为屏幕宽度的一半，保持圆形 */
		max-width: 100vw;
		/* 最大宽度 */
		max-height: 100vw;
		/* 最大高度 */
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		justify-content: center;
		align-items: center;
		position: relative;
		background-image: url('./assets/room/countBack.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		/* 保持圆形 */

		padding: 20px;
		margin-top: 60vw;
		/* 调整球体向下的距离（可以根据需要调整大小） */

	}

	/* 当前得分标签 - 独占一行 */
	.score-label-container {
		width: 100%;
		/* 占满宽度 */
		text-align: center;
		/* 居中 */
		margin-top: 5vw;
	}

	.score-label {
		font-size: 10.5vw;
		/* 增大字体 */
		color: #67E12A;
		margin-bottom: 1vw;
		/* 上下间距 */
		font-weight: bold;
	}

	/* 得分部分 */
	.score-container {
		width: 100%;
		/* 占满宽度 */
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.score-text {
		color: #fff;
		font-weight: bold;
		font-size: 200vw;
		/* 增大字体 */
	}

	.paused-overlay {
		position: absolute;
		top: 65%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		padding: 20px;
		border-radius: 10px;
		width: 60%;
		text-align: center;
		/* 水平居中文本 */
	}

	.paused-text {
		font-size: 18vw;
		color: #ffaa00;
		font-weight: bold;
		display: inline-block;
		/* 确保文本元素正确显示 */
		line-height: 1.2;
		/* 可以调整行高，让文字上下居中 */
	}

	.qrcode-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		width: 80vw;
		/* 设置容器宽度 */
		max-width: 300px;
	}

	.qrcode-image {
		width: 100vw;
		height: 80vw;
		max-height: 100vw;
		padding: 0;
		margin-top: 0;
	}

	.qrcode-text {
	    font-size: 20px;
	    color: red; 
	    text-align: center;
		padding: 0px;
		margin-top: 0;
	}

	/* 媒体查询：当屏幕宽度小于 320px 时，强制增大字体 */
	@media (max-width: 320px) {
		.score-label {
			font-size: 8vw;
			/* 更大的字体 */
		}

		.score-text {
			font-size: 16vw;
			/* 更大的字体 */
		}
	}
</style>